Summary

The shared panel transition listed only transform, opacity. Tailwind v4 compiles translate-x-* to the standalone translate property (translate: var(--tw-translate-x) var(--tw-translate-y)), and its .transform utility no longer covers translation — it composes only rotate/skew. So the slide offset was never interpolated: the panel snapped to its final position while only the fade played, and the swap read as a pop. Tailwind's own transition-transform expands to transform, translate, scale, rotate for exactly this reason.

Adding translate to the list fixes it. The preset is shared, so this also fixes the Calendar month strip that renders through it.

Tests

Full webkit suite green (83 files / 1693 passing, 6 skipped), eslint + vue-tsc clean.

<Transition> is stubbed by Vue Test Utils, so the rendered animation cannot be asserted from a test. The new test pins the css contract behind it instead — that the transition list names translate, not just transform. Verified independently in real Chromium that without the fix a mid-flight sample already sits at its final value.

This is deliberately a contract test rather than a class-string assertion: the value under test is the return of getTabViewPanelTransitionStyle(), a public preset, not a Tailwind class on some element.

Visual regression

No baseline movement expected. The runner freezes animations to 1ms and screenshots the settled state, so a slide and a pop are pixel-identical once settled — which is precisely why this defect needed a unit-level contract test to be caught at all. The 12 existing components-navigation-tabview--* snapshots should come back unchanged; if any of them move, that is a signal worth investigating rather than a baseline to accept.

No regeneration dispatch needed.

Notes

• Merge this before fix/calendar-field-parity. That branch restructures the Calendar month strip to slide, and it renders through this preset — without this fix the month swap still reads as a fade. Both are independently correct and green, so the order only affects whether the Calendar animation lands complete.
• Adds the panel change row to the tab-view spec's animation table, which had no entry for it.
• No new dependency. No breaking change.